import path from "node:path";
import { defineConfig, normalizePath } from "vite";
import react from "@vitejs/plugin-react";
import autoprefixer from "autoprefixer";
import tailwindcss from "@tailwindcss/vite";
import vitePluginStylelint from "vite-plugin-stylelint";
import vitePluginInspect from "vite-plugin-inspect";
// import testVitePluginIndex from './testDir/testVitePlugin/index.js'
import virtualModulePlugin from "./testDir/testVitePlugin/virtual-module.ts";
import svgrPlugin from "./testDir/testVitePlugin/svgr.ts";

const scssVariablePath = normalizePath(path.resolve("./src/variable.scss"));

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    react({
      babel: {
        // 当然也能加入其他类型的插件
        // 加入babel插件
        // 插件需要提前安装,
        plugins: [
          // 适配 styled-component
          "babel-plugin-styled-components", // css in js 的styled-components方案需要这个插件
        ],
      },
    }),
    tailwindcss(), // css原子化方案
    vitePluginStylelint(),
    // testVitePluginIndex(),
    // {
    // exclude: ['/node_modules/']
    // }
    virtualModulePlugin(),
    svgrPlugin({
      defaultExport: "url",
    }),
    vitePluginInspect(),
  ],
  css: {
    postcss: {
      plugins: [
        autoprefixer({
          overrideBrowserslist: ["Chrome > 40", "ff > 31", "ie 11"],
        }),
      ],
    },
    modules: {
      generateScopedName: "[name]__[local]__[hash:base64:5]", // 模块文件名__css类名__哈希值
    },
    preprocessorOptions: {
      scss: {
        additionalData: `@use "${scssVariablePath}";`, // 引入scss文件的时候，默认引入全局的scss变量设置文件
      },
    },
  },
});
